<template>
  <div class="bbswrapper">
    <div class="bbs">
      <bbs-card
        v-for="(list, index) of bbsLists"
        :itemLists="list.content"
        :cardTitle="list.cardTitle"
        :more="list.more"
        :key="index"
      ></bbs-card>
    </div>
  </div>
</template>
<script>
import BbsCard from "../../components/bbs_card.vue";
import Bscroll from "better-scroll";
import axios from "axios";
import ObserveDom from "@better-scroll/observe-dom";
Bscroll.use(ObserveDom);
export default {
  name: "bbs",
  components: {
    BbsCard,
  },
  methods: {
    async getBbsData() {
      let res = await axios.get("/api/bbs.json");
      res = res.data;
      if (res.ret && res.data) {
        const result = res.data;
        this.bbsLists = result.bbsLists;
      }
    },
  },
  mounted() {
    this.getBbsData().then(() => {
      this.scroll = new Bscroll(".bbswrapper", {
        click: true,
        scrollbar: true,
        observeDOM: true,
      });
    });
  },
  data() {
    return {
      bbsLists: [],
    };
  },
};
</script>
<style lang="scss" scoped>
.bbswrapper {
  height: 82vh;
}
</style>